<template>
  <div>
    <div class="transQuery_main">
      <h3 style="text-align: center">
        “防伪信息”是帮助您防范不法分子利用假冒网站进行诈骗的有效措施，当您登录支付账户时，页面显要位置将显示该信息
      </h3>

      <a-form @submit="handleInput" :form="form" style="margin-top: 30px">
        <a-form-item v-bind="formItemLayout" label="设置防伪信息">
          <a-input
            placeholder="设置防伪信息"
            v-decorator="[
              'AntiCounterfeiting',
              { rules: [{ required: true, message: '请填写防伪信息' }] },
            ]"
          />
        </a-form-item>

        <a-form-item :wrapperCol="{ span: 10, offset: 7 }">
          <a-button
            class="button_sty"
            :loading="loading"
            type="primary"
            html-type="submit"
            >下一步</a-button
          >
        </a-form-item>
      </a-form>

      <a-modal
        style="top: 250px"
        :visible="RelieveVisible"
        @cancel="handleCancel"
        :footer="null"
        :maskClosable="false"
      >
        <div class="modalClass">
          <div style="display: flex">
            我们已向您的绑定手机号
            <a-hide-data
              :params="{ type: 'mobileNo', value: this.mobileNo }"
            ></a-hide-data
            >发送了一条验证码，请查收后填写
          </div>
          <a-form>
            <a-form-item v-bind="formItemLayout" label="验证码">
              <a-input
                style="width: 200px"
                placeholder="验证码"
                v-model="verCode"
              />
            </a-form-item>
          </a-form>
          <div class="footClass">
            <a-button
              class="btnClass"
              :loading="loading2"
              type="primary"
              @click="MessageSettin"
              >下一步</a-button
            >
          </div>
        </div>
      </a-modal>
      <a-modal
        style="top: 250px"
        :visible="RelieveVisible2"
        :footer="null"
        :closable="false"
      >
        <div class="modalClass">
          <div style="text-align: center; color: green; font-size: 7vw">
            <a-icon type="check-circle" />
          </div>
          <div style="text-align: center; margin-top: 15px">
            <h2>设置成功</h2>
          </div>
          <div class="footClass">
            <a-button
              class="btnClass"
              :loading="loading2"
              type="primary"
              @click="handleOk"
              >确定</a-button
            >
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import api from "@/common/api";
import ATabs from "ant-design-vue/es/tabs";
import AHideData from "../common/HideData";
const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AHideData,
    ATabPane,
  },

  data() {
    return {
      form: this.$form.createForm(this),
      mobileNo: localStorage.getItem("mobileNo"),
      RelieveVisible: false,
      RelieveVisible2: false,
      loading: false,
      loading2: false,
      resultShow: false,
      verCode: "",
      AntiCounterfeiting: "",
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8, offset: 1 },
          md: { span: 8, offset: 1 },
        },
      },
    };
  },

  mounted() {
    // console.log(this.mobileNo)
    let setInfo = localStorage.getItem("setInfo");
    console.log(setInfo);
    if (setInfo && setInfo != "null") {
      this.form.setFieldsValue({
        AntiCounterfeiting: setInfo,
      });
    }
  },
  methods: {
    moment,

    handleOk() {
      this.RelieveVisible2 = false;
      this.$router.push("/userMain");
    },
    handleCancelRelieve(e) {
      this.RelieveVisible = false;
    },
    handleInput(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          if (values.AntiCounterfeiting.length > 16) {
            this.$message.error("字数超限！");
            this.loading = false;
            return false;
          }
          this.AntiCounterfeiting = values.AntiCounterfeiting;

          // 发送验证码
          api.sendAntiFakeCode({ mobileNo: this.mobileNo }, (res) => {
            this.loading = false;
            if (res.code == "OK") {
              this.RelieveVisible = true;
            } else {
              this.$message.error(res.message);
              return false;
            }
          });
        }
      });
    },
    // 发送验证码 下一步
    MessageSettin() {
      if (this.verCode == "") {
        this.$message.info("请输入验证码");
        return false;
      }
      var sendData = {
        verCode: this.verCode,
        mobileNo: this.mobileNo,
      };
      this.loading2 = true;
      api.checkAntiFakeCode(sendData, (res) => {
        if (res.code == "OK") {
          this.updataMessage();
        } else {
          this.loading2 = false;
          this.$message.error(res.message);
          return false;
        }
      });
    },
    handleCancel() {
      this.RelieveVisible = false;
    },
    updataMessage() {
      this.loading2 = false;
      api.confirmAntiFakeSign({ data: this.AntiCounterfeiting }, (res) => {
        if (res.code == "OK") {
          this.RelieveVisible = false;
          this.RelieveVisible2 = true;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
.result {
  text-align: center;
  width: 72%;
  margin: 0 auto;
  margin-top: 120px;
  .success {
    color: #29a576;
  }
  .icon {
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 24px;
  }
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.button_sty {
  width: 140px;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 40px;
  margin-top: 50px;
}

.modalClass span {
  font-size: 17px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footClass {
  // width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>